<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>请求报文_辅助调试</title>
  <!-- 引入bootstrap.css -->
  <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" />
  <!-- 公共 -->
  <style>
    html,
    body {
      background-color: #EDF0F5;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .container {
      width: 520px;
      height: 540px;
      background-color: #fff;
      padding: 60px;
      box-sizing: border-box;
    }

    .container h3 {
      font-weight: 900;
    }
  </style>
  <!-- 表单容器和内容 -->
  <style>
    .form_wrap {
      color: #8B929D !important;
    }

    .form-text {
      color: #8B929D !important;
    }
  </style>
  <!-- 提示框样式 -->
  <style>
    .alert {
      transition: .5s;
      opacity: 0;
    }

    .alert.show {
      opacity: 1;
    }
  </style>
</head>

<body>
  <div class="container">
    <h3>欢迎-登录</h3>
    <!-- 登录结果-提示框 -->
    <div class="alert alert-success" role="alert">
      JS中会动态插入提示文字
    </div>
    <!-- 表单 -->
    <div class="form_wrap">
      <form>
        <div class="mb-3">
          <label for="username" class="form-label">账号名</label>
          <input type="text" class="form-control username" name="username" aria-describedby="usernameHelp">
        </div>
        <div class="mb-3">
          <label for="password" class="form-label">密码</label>
          <input type="password" class="form-control password" name="password">
        </div>
        <button type="button" class="btn btn-primary btn-login"> 登 录 </button>
      </form>
    </div>
  </div>
  <script src="https://unpkg.com/axios@0.21.1/dist/axios.min.js"></script>
  <script>


    const btn = document.querySelector('.btn-login')
    console.log(btn);

    btn.addEventListener('click', function () {
      const username = document.querySelector('[name="username"]').value
      const password = document.querySelector('[name="password"]').value

      if (username.length < 8 || password.length < 6) return alert('错误')

      axios({
        url: 'http://hmajax.itheima.net/api/login',
        method: 'POST',
        data: {
          username,
          password
        }
        //和后台
      }).then(res => {
        console.log(res, 'res');
      }).catch((err) => {
        console.log(err);
        alert(err.response.data.message)
      })
    })





















    // // 1.获取 alert
    // const alertCom = document.querySelector('.alert')

    // // 2.抽取提示框的方法
    // function showAlert(msg, classname) {
    //   alertCom.innerText = msg
    //   alertCom.classList.add(classname)
    //   alertCom.classList.add('show')
    //   setTimeout(() => {
    //     // 延迟隐藏
    //     alertCom.classList.remove('show')
    //     alertCom.classList.remove(classname)
    //   }, 2000);
    // }

    // // 3.给登录按钮绑定点击事件，提交输入的用户信息到服务器
    // document.querySelector('.btn-login').addEventListener('click', function () {
    //   // 3.1 获取输入的用户名和密码
    //   const username = document.querySelector('.username').value
    //   const password = document.querySelector('.password').value

    //   // 3.2用户名 密码 长度判断
    //   if (username.trim().length < 8) {
    //     showAlert('用户名长度需要大于等于8', 'alert-danger')
    //     return
    //   }
    //   if (password.trim().length < 6) {
    //     showAlert('密码长度需要大于等于6', 'alert-danger')
    //     return
    //   }

    //   // 3.3 通过axios提交到服务器 并 提示用户 成功 / 失败
    //   axios({
    //     url: 'http://hmajax.itheima.net/api/login',
    //     method: 'post',
    //     data: {
    //       username,
    //       password
    //     }
    //   }).then(res => {
    //     // 显示提示框
    //     showAlert(res.data.message, 'alert-success')
    //   }).catch(err => {
    //     // 显示警示框
    //     showAlert(err.response.data.message, 'alert-danger')
    //   })
    // })
  </script>
</body>

</html>